<template>
  <div>
    <el-form :model="form" label-width="auto" inline>
      <el-form-item>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="采购时间" value="2" />
          <el-option label="提交时间" value="3" />
        </el-select>
        <el-date-picker v-model="times" type="datetimerange" start-placeholder="开始时间" value-format="x"
          end-placeholder="结束时间" time-format="A hh:mm:ss" />
      </el-form-item>
      <el-form-item label="采购平台:">
        <el-select v-model="form.purchasePlatformId">
          <el-option label="全部" :value="0"></el-option>
          <el-option :label="item.value" :value="item.key" value-key="key"
            v-for="item in store.productPurchaseProcessCreatePurchaseProcessDicArr" :key="item.key"
            @click="getSon(item)" />
        </el-select>
      </el-form-item>
      <el-form-item label="采购订单号:">
        <el-input v-model="form.productPurchaseOrderCode" clearable />
      </el-form-item>
      <el-form-item label="采购账号:">
        <el-select v-model="form.purchaseCustomerName">
          <el-option :label="item.value" :value="item" value-key="key" v-for="item in sonSelect" :key="item.key" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- <button @click="openLooKlook">11231231</button> -->
  <div class="table">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      border>
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column label="采购平台">
        <template #default="scope">{{ scope.row.purchasePlatformName }}</template>
      </el-table-column>
      <el-table-column label="采购账号" width="180">
        <template #default="scope">{{ scope.row.purchaseCustomerName }}</template>
      </el-table-column>
      <el-table-column label="采购时间" width="180">
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="入库批次" width="180">
        <template #default="scope">{{ scope.row.inboundBatchesCode }}</template>
      </el-table-column>
      <el-table-column label="采购订单号" width="180">
        <template #default="scope"><span class="headclass" @click="openLooKlook(scope.row.productPurchaseOrderCode)">{{
          scope.row.productPurchaseOrderCode
            }}</span></template>
      </el-table-column>
      <el-table-column label="商品信息" width="180">
        <template #default="scope">{{ scope.row.shopGoodSkuId }}</template>
      </el-table-column>
      <el-table-column label="采购数量">
        <template #default="scope">{{ scope.row.purchaseNum }}</template>
      </el-table-column>
      <el-table-column label="上家订单状态">
        <template #default="scope">{{ scope.row.processOrderStatus == 0 ? '待发货' :
          scope.row.processOrderStatus == 1 ? '已发货' : scope.row.processOrderStatus == 1 ? '待签收' : '' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="GeneratePurchaseOrder(scope.row)">
            手工关联
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <div>
    <el-dialog v-model="HeaddialogVisible" width="500">
      <span>
        <el-form :model="HeaddialogVisibleForm" label-width="auto" style="max-width: 600px"
          ref="HeaddialogVisibleRuleFormRef" :rules="rules">

          <el-form-item label="采购平台：" prop="purchasePlatformId">
            <el-input v-model="HeaddialogVisibleForm.purchasePlatformId" :disabled="true" />
            <!-- <el-select v-model="HeaddialogVisibleForm.purchasePlatformId">
              <el-option :label="item.value" :value="item" value-key="key"
                v-for="item in store.productPurchaseProcessCreatePurchaseProcessDicArr" :key="item.key"
                @click="getSon(item)" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="采购账号：" prop="purchaseCustomerId">
            <el-input v-model="HeaddialogVisibleForm.purchaseCustomerId" :disabled="true" />
            <!-- <el-select v-model="HeaddialogVisibleForm.purchaseCustomerId">
              <el-option :label="item.value" :value="item" value-key="key" v-for="item in sonSelect" :key="item.key" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="采购订单号：" prop="productPurchaseOrderCode">
            <el-input v-model="HeaddialogVisibleForm.productPurchaseOrderCode" :disabled="true" />
          </el-form-item>
          <el-form-item label="上家物流单号：" prop="name">
            <el-input v-model="HeaddialogVisibleForm.name" placeholder="多个上家运单号用逗号分隔" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetForm(HeaddialogVisibleRuleFormRef)">取消</el-button>
          <el-button type="primary" @click="confirmHeaddialogVisible(HeaddialogVisibleRuleFormRef)">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { productPurchaseProceslist, updatePurchaseProcessTrackingNumber, orderInfoTaskCreat } from '@/api/index'
import { useAlertsStore } from '@/store/index'
import { ElMessage } from 'element-plus'
const store = useAlertsStore()
// do not use same name with ref
const form = ref({
  createTimeStart: '',
  createTimeEnd: '',
  submitTimeStart: '',
  submitTimeEnd: '',
  purchasePlatformId: 0,
  purchaseCustomerName: '',
  productPurchaseOrderCode: '',
  pageSize: 10,
  pageNum: 1
})
const times = ref('')
const tableData = ref([])
onBeforeMount(() => {
  store.productPurchaseProcessCreatePurchaseProcessDicBtn()
})
const onSubmit = () => {
  getList()
  console.log('submit!')
}
const select = ref('2')
const getList = () => {
  if (times.value) {
    if (select.value === '2') {
      form.value.createTimeStart = times.value[0]
      form.value.createTimeEnd = times.value[1]
    } else if (select.value === '3') {
      form.value.submitTimeStart = times.value[0]
      form.value.submitTimeEnd = times.value[1]
    }
  } else {
    form.value.createTimeStart = ''
    form.value.createTimeEnd = ''
    form.value.submitTimeStart = ''
    form.value.submitTimeEnd = ''
  }
  productPurchaseProceslist(form.value).then(res => {
    const { data: { data } } = res
    total.value = data.total
    tableData.value = data.list
  })
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}

// table
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const sonSelect = ref([])
const getSon = (item) => {
  sonSelect.value = item.purchaseCustomerDics
  console.log(sonSelect.value)
}
// // 关联
// const rules = reactive({
//   name: [
//     { required: true, message: '必填', trigger: 'blur' }
//   ],
//   productPurchaseOrderCode: [
//     { required: true, message: '必填', trigger: 'blur' }
//   ],
//   purchasePlatformId: [
//     {
//       required: true,
//       message: '必选',
//       trigger: 'change'
//     }
//   ],
//   purchaseCustomerId: [
//     {
//       required: true,
//       message: '必选',
//       trigger: 'change'
//     }
//   ]
// })
const HeaddialogVisibleForm = ref({})
const HeaddialogVisible = ref(false)
const GeneratePurchaseOrder = (row) => {
  HeaddialogVisible.value = true
  HeaddialogVisibleForm.value.id = row.id
  HeaddialogVisibleForm.value.purchasePlatformId = row.purchasePlatformName
  HeaddialogVisibleForm.value.purchaseCustomerId = row.purchaseCustomerName
  HeaddialogVisibleForm.value.productPurchaseOrderCode = row.productPurchaseOrderCode
  store.productPurchaseProcessCreatePurchaseProcessDicBtn()
}
const HeaddialogVisibleRuleFormRef = ref()
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  HeaddialogVisible.value = false
  HeaddialogVisibleForm.value = {}
}
const confirmHeaddialogVisible = async (formEl) => {
  console.log('1231231', formEl)
  // if (!formEl) return
  // await formEl.validate((valid, fields) => {
  // if (valid) {
  const result = removeNonCommaCharacters(HeaddialogVisibleForm.value.name)
  console.log(HeaddialogVisibleForm.value.name)
  console.log('result')
  console.log(result)
  updatePurchaseProcessTrackingNumber(HeaddialogVisibleForm.value.id, {
    trackingNumbers: HeaddialogVisibleForm.value.name
  }).then(res => {
    HeaddialogVisible.value = false
    getList()
    ElMessage.success('操作成功')
  })
  // } else {
  //   console.log('error submit!', fields)
  // }
  // })
}
// 处理字符串
const removeNonCommaCharacters = (inputString) => {
  // 使用正则表达式匹配非逗号字符并替换为空字符串
  const cleanedString = inputString.replace(/[^,]/g, '')
  return cleanedString
}
const openLooKlook = (row) => {
  orderInfoTaskCreat(row).then(res => {
    const { data: { data } } = res
    location.href = `cg://purchase?taskType=showorder&api=${data}`
  })
}
</script>

<style lang='less' scoped></style>
